<template>
	<view class="p-10">
		<view class="main">
			<my-forms ref="form" :model="formModel" :label-position="'top'" :formItem="formData" :disabled="true" label-width="120px">
				<template #violatorsId>
					<my-select v-model="formModel.violatorsId" :clear="true" @change="getViolators" :list="workerList" :fileType="{ label: 'code', value: 'id' }"></my-select>
				</template>
				<template #reportId>
					<my-select v-model="formModel.reportId" :clear="true" @change="getViolators1" :list="reqportList" :fileType="{ label: 'code', value: 'id' }"></my-select>
				</template>
				<template #reportIds>
					<my-select v-model="formModel.reportIds" :clear="true" @change="getSecReport" :list="secReportList" :collapseTags='true' :collapseTagsNum='3' :multiple='true' :fileType="{ label: 'code', value: 'id',disabled:'disabled' }"></my-select>
				</template>
				<template #secReportList>
					<uni-table ref="Reporttable" emptyText="暂无更多数据" stripe >
						<uni-tr>
							<uni-th align="center" width="60">序号</uni-th>
							<uni-th align="center" width="160">上报人工号</uni-th>
							<uni-th align="center" width="100">上报人姓名</uni-th>
							<uni-th align="center" width="100">上报人岗位</uni-th>
							<uni-th align="center" width="100">上报人职务</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in ReporttableData" :key="index">
							<uni-td align="center" style="fontsize: 12px !important">
								{{ index+1 }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secId }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secName }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secPos }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secDuty }}
							</uni-td>
							
						</uni-tr>
					</uni-table>
				</template>
			</my-forms>

			<u-button class="m-t-20 m-b-30" type="success" shape="circle" text="提交" @click="submit()"></u-button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { onLoad,onShow,onUnload,onHide} from '@dcloudio/uni-app';
import { getDicts } from '@/api/public.js';
import { addVioEvent, pageVioEvents, pageVioDamage, pageVioType, pageVioItem, pageStaff, listWorker, listReporter } from '@/api/manage.js';
import { infoUserProfile } from '@/api/public.js';
import { func } from 'uview-plus/libs/function/test';

onLoad(() => {
	loadData();
});

// onHide(()=>{
// 	// console.log(123)
// 	formModel.value = {}
// })
// 校验表单数据
let formData = computed(() => {
	return [
		{
			label: '违章人员工号',
			prop: 'violatorsId',
			required: true
		},
		{
			label: '违章人员姓名',
			prop: 'breakName',
			disabled: true
		},
		{
			label: '违章人员岗位',
			prop: 'breakPosition',
			disabled: true
		},
		{
			label: '违章人员职位',
			prop: 'breakDuty',
			disabled: true
		},
		{
			label: '违章人员区队',
			prop: 'breakTeam',
			disabled: true
		},
		{
			label: '违章人员科室',
			prop: 'breakRoom',
			disabled: true
		},
		{
			label: '违章地点',
			prop: 'breakLocation',
			required: true
		},
		{
			label: '违章时间',
			prop: 'breakTime',
			itemType: 'date',
			type: 'date',
			required: true
		},
		{
			label: '危害类型',
			prop: 'damageId',
			itemType: 'select',
			list: DamageList.value,
			fileType: { label: 'eventName', value: 'id' },
			required: true
		},
		{
			label: '事件类型',
			prop: 'eventId',
			itemType: 'select',
			list: EventList.value,
			fileType: { label: 'eventName', value: 'id' },
			required: true
		},
		{
			label: '违章条款',
			prop: 'violationId',
			itemType: 'select',
			list: TypeList.value,
			fileType: { label: 'itemName', value: 'id' },
			required: true
		},
		{
			label: '条款类型',
			prop: 'itemId',
			itemType: 'select',
			list: ItemList.value,
			fileType: { label: 'violationsClause', value: 'id'},
			required: true
		},
		{
			label: '现场照片',
			itemType: 'image',
			prop: 'pictureList'
		},
		{
			label: '备注',
			prop: 'remark',
			type: 'textarea'
		},
		{
			label: '上报人工号',
			prop: 'reportId',
			required: true
		},
		{
			label: '主上报人姓名',
			prop: 'reportName',
			disabled: true
		},
		{
			label: '主上报人岗位',
			prop: 'reportPosition',
			disabled: true
		},
		{
			label: '主上报人职位',
			prop: 'reportDuty',
			disabled: true
		},
		
		// {
		// 	label: '上报人区队',
		// 	prop: 'reportTeam',
		// 	disabled: true
		// },
		// {
		// 	label: '上报人科室',
		// 	prop: 'reportRoom',
		// 	disabled: true
		// }
		{
			label: '副上报人工号',
			prop: 'reportIds',
			required: true
		},
		{
			label: '上报人列表',
			prop: 'secReportList',
		},
	];
});
const form = ref(null);
const formModel = ref({});

//提交
const submit = () => {
	form.value.$refs.refMyForm
		.validate()
		.then(async (res) => {
			addVioEvent(formModel.value).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: `新增成功`
					});
					formModel.value = {}
					uni.navigateTo({
						url: '/pages/manage/index'
					});
				} else {
					uni.showToast({
						icon: 'fail',
						title: res.msg
					});
				}
			});
		})
		.catch((err) => {
			uni.showToast({
				icon: 'error',
				title: err[0].errorMessage
			});
		});
};

let stateList = ref([]);
let violatorsList = ref([]);
let workerList = ref([])
let reqportList = ref([])

function getViolators(val) {
	let obj = violatorsList.value.find((item) => item.id == val);
	formModel.value.breakName = obj?.name;
	formModel.value.breakPosition = obj?.postName;
	formModel.value.breakDuty = obj?.dutiesName;
	formModel.value.breakTeam = obj?.teamName;
	formModel.value.breakRoom = obj?.sectionName;
}
function getViolators1(val) {
	let obj = violatorsList.value.find((item) => item.id == val);
	formModel.value.reportName = obj?.name;
	formModel.value.reportPosition = obj?.postName;
	formModel.value.reportDuty = obj?.dutiesName;
	formModel.value.reportTeam = obj?.teamName;
	formModel.value.reportRoom = obj?.sectionName;
}

function getSecReport(val){
	ReporttableData.value = []
	val.forEach(item=>{
		let obj = violatorsList.value.find((item2) => item2.id == item.value)
		let obj2 = {}
		Object.assign(obj2,{
			secId:obj.id,
			secName:obj.name,
			secPos:obj.postName,
			secDuty:obj.dutiesName
		})
		ReporttableData.value.push(obj2)
	})
}

//其他上报人下拉
let secReportList = computed(()=>{
	return reqportList.value.map(item=>{
		if(item.id == formModel.value.reportId){
			return{
				...item,
				disabled:true
			}
		}else{
			return item
		}
	})
})


//其他上报人人table
let Reporttable = ref(null);
let ReporttableData = ref([]);

let EventList = ref([]);
let DamageList = ref([]);
let TypeList = ref([]);
let ItemList = ref([]);

//数据请求
function loadData() {
	getDicts('approval_state').then((res) => {
		stateList.value = res.data.map((item) => ({
			dictLabel: item.dictLabel,
			dictValue: item.dictValue
		}));
	});
	pageStaff({ needCount: 1 }).then((res) => {
		violatorsList.value = res.data;
	});
	
	listWorker().then(res => {
		workerList.value = res.data
	})
	
	listReporter().then(res => {
		reqportList.value = res.data
	})

	pageVioEvents().then((res) => {
		EventList.value = res.data.rows;
	});
	pageVioDamage().then((res) => {
		DamageList.value = res.data.rows;
	});
	pageVioType().then((res) => {
		TypeList.value = res.data.rows;
	});
	pageVioItem().then((res) => {
		ItemList.value = res.data.rows;
	});
	infoUserProfile().then((res) => {
		formModel.reportId = res.data.user.id;
	});
}

</script>

<style lang="scss" scoped>
.main {
	background-color: white;
	padding: 10px;
	border-radius: 10px;
}
</style>
